<template>
    <div class="zone-goods">
        <div class="tab-goods">
            <list-goods :goods-list="partGoodsList" @toDetail="toDetail" @add="toAddCart" />
        </div>
        <view v-if="finish" class="no-more">
            <p>{{loadingText}}</p>
        </view>
        <bottom-tab></bottom-tab>
        <product-spec
            :pro-content="specGood"
            operation="add"
            ref="fspec"
            @chooseDone="specChooseOk"
            v-if="specGood.key"
        />
    </div>
</template>

<script>
    import API from "../../request/api";
    import ListGoods from "../../components/Online/list-goods";
    import { mapActions } from "vuex";
    import BottomTab from "../../components/Online/bottom-tab";
    import ProductSpec from "../../components/Online/product-spec";
    export default {
        data() {
            return {
                id: this.$route.query.id,
                page: 0,
                size: 8,
                partGoodsList: [],
                finish: false,
                loadingText: "加载中",
                specGood: {}, //显示规格弹窗的数据
                goodId: "" // 点击购物车图标的商品gid
            };
        },
        components: {
            ProductSpec,
            BottomTab,
            ListGoods
        },
        computed: {
            isLogin() {
                let userInfo = this.$store.state.login.userInfo;
                console.log(
                    "loginlogin:",
                    this.$store.state.login.userInfo,
                    userInfo.role
                );
                let login = userInfo.role === undefined ? false : true;
                return login;
            }
        },

        created() {
            this.getGoodsList();
        },
        mounted() {},
        methods: {
            getGoodsList() {
                if (this.finish == false) {
                    this.loadingText = "加载中";
                    this.finish = true;
                    this.request
                        .get(API.getPartGoods, {
                            id: this.id,
                            page: this.page,
                            size: this.size
                        })
                        .then(res => {
                            console.log("getPartGoods", res);
                            if (res.list && res.list.length) {
                                this.page++;
                                this.partGoodsList = this.partGoodsList.concat(
                                    res.list
                                );

                                if (res.list.length < this.size) {
                                    this.finish = true;
                                    this.loadingText = "没有更多了";
                                    return;
                                }
                                this.finish = false;
                                this.loadingText = "加载更多";
                            }
                        })
                        .catch(err => {
                            console.error("getPartGoods-err", err);
                        });
                }
            },
            toDetail(detail) {
                console.log("toDetail", detail);
                this.$router.push({
                    name: "online-detail",
                    query: {
                        gid: detail.gid
                    }
                });
            },
            toAddCart(good) {
                this.specGood = {};
                this.request
                    .get(API.frontGetMiniGood, {
                        gid: good.gid
                    })
                    .then(res => {
                        console.log("frontGetMiniGood", res);
                        this.goodId = good.gid;
                        this.specGood = res;
                        this.specGood.pic = good.pic;
                        setTimeout(() => {
                            // console.log('that.$refs',that.$refs)
                            this.$refs.fspec.show();
                        }, 5);
                    })
                    .catch(err => {
                        console.error("frontGetMiniGood-err", err);
                    });
            },
            specChooseOk(sku) {
                console.log("SKUSKU", sku);
                sku.system = this.$store.state.login.system;
                sku.gid = this.goodId;
                if (sku.buyid) {
                    if (this.isLogin) {
                        // 购物车添加商品（已注册）
                        this.request
                            .post(API.onlineAddCartGoods, {
                                gid: sku.gid,
                                buyid: sku.buyid,
                                num: sku.count
                            })
                            .then(res => {
                                console.log("onlineAddCartGoods", res);
                            })
                            .catch(err => {
                                console.error("onlineAddCartGoods-err", err);
                            });
                    } else {
                        this.addToCart(sku);
                    }
                    this.$toast("加入购物车成功");
                }
            },
            ...mapActions(["addToCart"])
        },
        watch: {}
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl';

    .zone-goods {
        /* background-color grayF */
        margin-bottom: vw(50);
    }

    .no-more {
        flex-x(center);
        width: 100%;
        height: vw(24);
        padding: 30px;

        p {
            word-vw(14px, gray9);
        }
    }
</style>
